<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/jquery-1.11.3.js"></script>
  <title>serialize</title>
</head>

<body>
  <form action="http://localhost:3000/">
    用户名: <input type="text" name="uname"> <br>
    密码: <input type="password" name="upwd"> <br>
    爱好: <input type="checkbox" name="favs[]" value="running" id="running">
    <label for="running">跑步</label>
    <input type="checkbox" name="favs[]" value="swiming" id="swiming">
    <label for="swiming">游泳</label>
    <input type="checkbox" name="favs[]" value="food" id="food">
    <label for="food">美食</label>
    <br>
    <button>提交</button>
  </form>

  <script>
    $("button").click(function (e) {
      e.preventDefault();
      var url = "http://localhost:3000/";
      // var uname = $("[name=uname]").val();
      // var upwd = $("[name=upwd]").val();
      // var search = `uname=${uname}&upwd=${upwd}`;
      // $(":checkbox").each(function () {
      //    var $self = $(this)
      //    if ($self.is(":checked")) {
      //       search += `&favs=${$self.val() }`
      //    }
      // });
      // console.log(search);
      //    等同于
      //      ↓
      var data = $("form").serialize();
      console.log("string", data);
      data = $("form").serializeArray();
      console.log("client json", data);

      $.ajax({
        url: url,
        data: data,
        success: function (result) {
          console.log('server return: ', result);
          alert(result);
        }
      });
    });
  </script>
</body>

</html>